<template>
  <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="120px" class="demo-ruleForm" :size="formSize"
    status-icon>
    <el-form-item label="学员姓名:" prop="name">
      <el-input v-model="ruleForm.name" readonly />
    </el-form-item>
    <el-form-item label="当前科目" prop="subject">
      <el-select v-model="ruleForm.subject" placeholder="考试进度" @change="handleSelectSubject">
        <el-option v-for="item in subjectData" :label="item.subject" :value="item.objectId" />
      </el-select>
    </el-form-item>
    <el-form-item label="考试进度：" prop="progress">
      <el-select v-model="ruleForm.subjectState" placeholder="考试进度">
        <el-option v-for="item in processData" :label="item.subject" :value="item.subject" />
      </el-select>
    </el-form-item>
    <el-form-item label="进度时间:" prop="progressTime">
      <el-date-picker v-model="ruleForm.progressTime" type="date" placeholder="请选择进度时间" style="width: 100%" />
    </el-form-item>
    <el-form-item label="备注:" prop="comment">
      <el-input v-model="ruleForm.comment" />
    </el-form-item>
    <el-row justify="end">
      <el-col :span="12" :offset="0">
        <el-form-item>
          <el-button type="warning" @click="submitForm(ruleFormRef)">
            提交
          </el-button>
        </el-form-item>
      </el-col>
    </el-row>


  </el-form>
</template>
  
<script lang="ts" setup>
import { reactive, ref } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import { stuExamInfoPut, subjectGet } from '../../../api/student';
import { examType } from '../../../types/examType';
import { dateFormat } from "../../../utils/timeFomat"
import { getSubjectName } from "../../../utils/schoolName"


interface propsType {
  rowData: examType
}

let formData = defineProps<propsType>()
const emit = defineEmits(['getisShow'])

const formSize = ref('default')
const ruleFormRef = ref<FormInstance>()
let ruleForm = reactive({}) as examType

ruleForm = formData.rowData
const rules = reactive<FormRules>({
  name: [
    { required: true, message: '姓名不能为空', trigger: 'blur' },
  ],
  subject: [
    { required: true, message: '当前进度不能为空', trigger: 'blur' }
  ],
  progress: [
    { required: true, message: '考试进度不能为空', trigger: 'blur' }
  ],
  progressTime: [
    {
      type: 'date',
      required: true,
      message: '请选择进度日期',
      trigger: 'change',
    },
  ],
})
//获取科目信息
let subjectData = ref<Array<{ subject: string; objectId: string }>>([])
let res = await subjectGet("0-0")
subjectData.value = res.data.results
//首屏触发数，获取对应科目的状态
console.log("首屏触发条件", formData.rowData.subject);

subjectGet(formData.rowData.subject).then((res) => {
  processData.value = res.data.results
  console.log("首屏触发:", processData.value);

})

//科目切换时触发函数，获取对应科目的状态
let processData = ref<Array<{ subject: string }>>([])
const handleSelectSubject = (val:string) => {
  subjectGet(val).then((res) => {
    console.log("进度信息", res);
    processData.value = res.data.results
  })
}

//修改学员考试信息
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate(async (valid, fields) => {
    if (valid) {

      let obj = await getSubjectName()
      console.log(obj);
      ruleForm.subject = obj[ruleForm.subject]
      ruleForm.progressTime = dateFormat(ruleForm.progressTime, 'YYYY-MM-DD')
      delete ruleForm.createdAt
      console.log("提交信息", ruleForm);
      stuExamInfoPut(ruleForm.objectId, ruleForm).then(() => {
        emit("getisShow")
      })


    } else {
      console.log('error submit!', fields)
    }
  })
}
</script>